<template>
  <ex-dialog width="900px" class="ex-diolog" :title="title" :visible="visible" :close-on-click-modal="false"
    @closeDialog="handleClose">
    <div class="main" v-loading="loading">
      <el-form  :model="ruleForm" :rules="rules" ref="ruleForm" :label-width="labelWidth" class="demo-ruleForm">
        <el-form-item label="当前售卖时间：">
          <el-date-picker v-model="date" start-placeholder="开始日期" end-placeholder="结束日期" :clearable="false"
            type="datetimerange" format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm" :disabled="true">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="售卖截至时间：" prop="soldEndTime">
          <el-date-picker v-model="ruleForm.soldEndTime" placeholder="截止时间" type="datetime" format="yyyy-MM-dd HH:mm"
            value-format="yyyy-MM-dd HH:mm">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="团购库存数量：" prop="stockCount" v-if="ruleForm.stockLimitType == '1'">
          <el-input v-model="ruleForm.stockCount" placeholder="请输入" :style="{width: inputWidth}"><template
            slot="append">份</template></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="button_box">
      <el-button @click="editMore(id)">编辑更多信息</el-button>
      <el-button type="primary" :loading="sumitLoading" @click="editForm('ruleForm')" v-if="id != null">确认修改</el-button>
    </div>
  </ex-dialog>
</template>
<script>
import Loading from "@/components/Loading/index";
// api
import {
  addShenyeShop,
  getAnchorTradeDetail,
  updateAnchorTradeDetail,
  shopIndustrySelect,
} from "@/api/operateActive";

export default {
  components: {
    Loading,
  },
  props: {
    visible: Boolean,
    id: String,
  },
  data() {
    return {
      labelWidth: '120px',
      inputWidth: '300px',
      title: '编辑免审信息',
      loading: false,
      sumitLoading: false,
      date: [],
      ruleForm: {
        id: '', //id,编辑时才传
        stockCount:'',
        soldEndTime:'',
        soldStartTime:'',
        stockLimitType:'',
      },
      rules: {
        soldEndTime: [{
          required: true,
          message: '请选择售卖截至时间',
          trigger: 'change'
        }],
        stockCount: [{
          required: true,
          message: '请输入库存',
          trigger: 'change'
        }],
      },
    };
  },
  computed: {},
  created() {
    console.log(this.id)
    if (this.id != null) {
      this.getInfo()
    }

  },
  mounted() {

  },
  methods: {
    getInfo() { //获取信息详情
      this.loading = true
      getAnchorTradeDetail(this.id).then((res) => {
        this.loading = false
        this.date = [res.result.soldStartTime,res.result.soldEndTime]
        // this.ruleForm.stockCount = res.result.stockCount
        this.ruleForm = res.result
      })
        .finally(() => {
          this.loading = false;
        });
    },
    handleClose(formName) {
        this.$emit("update:visible", false);
    },
    //编辑更多信息
    editMore(id){
      this.$router.push({
          path: "/addCommodity?id=" + id,
      });
    },
    editForm(formName) {
      //编辑确定
      this.$refs[formName].validate((valid) => {
          console.log("error submit!!",this.endDate);
        if (valid) {
          //   alert("submit!");editGroupon
          this.sumitLoading = true
          var params = {
            id: this.id,
            ...this.ruleForm,
          };
          // params.soldEndTime = this.ruleForm.endDate
          updateAnchorTradeDetail(params).then((res) => {
            this.$message({
              message: "修改成功",
              type: "success",
            });
            setTimeout(() => {
              this.$emit('success')
              this.handleClose()
              this.sumitLoading = false
            }, 1000);
          })
            .catch(() => {
              this.sumitLoading = false;
            });

        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};

</script>
<style lang="scss" scoped>
.ex-diolog {
  ::v-deep .ex--dialog--footer {
    border: none !important;
    padding: 0 !important;
  }

  ::v-deep .ex--dialog--main {
    padding: 10px 20px !important;
  }
}

.main {
  padding: 20px 20px;
}

.from_box {
  display: flex;
  margin-bottom: 20px;
}

.from_box_l {
  width: 110px;
  color: #606266;
  font-size: 14px;
  font-weight: bold;
}

.from_box_r {
  color: #333;
  font-size: 15px;
  flex: 1;
}

.el_table_box {
  padding: 0 20px 40px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  margin-bottom: 20px;
}

.el_table_box_h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #f3f3f3;
  margin-bottom: 14px;
}

.el_table_box_h_title {
  border-left: 4px solid #ff9300;
  padding-left: 4px;
}

.carousel_box {
  width: 400px;
  margin-bottom: 20px;
}

.swiper_img {
  width: 100%;
  height: 100%;
}

.carousel_box_two {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.phone_box {
  width: 100px;
  height: 100px;
  margin: 0 10px 10px 0;
}

.button_box {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
}

::v-deep .avatar-uploader2 .el-upload {
  width: 100% !important;
}

.avatar-uploader2 {
  width: 228px;
  height: 128px;
  text-align: center;
  line-height: 128px;
  background-color: #fbfdff;
  border: 1px dashed #c0ccda;
}

.banner_img {
  width: 228px;
  height: 128px;
}

.richText {
  border: 1px solid #ccc;
  line-height: normal;
}
</style>
